<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>忘记密码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" th:href="@{/image/favicon.ico}" type="image/x-icon"/>

    <link rel="stylesheet" th:href="@{/css/oksub.css}" type="text/css"/>
    <script type="text/javascript" th:src="@{/lib/loading/okLoading.js}"></script>
    <style>
        .forget .tit {
            padding-top: 15px;
            text-align: center;
            font-size: 18px;
        }
        .forget .code-box {
            display: flex;
        }
        .forget .code-box .btn-auth-code {
            margin-left: 10px;
        }
        .reset-password-form {
            display: none;
        }
    </style>
</head>
<body class="page-fill">
    <div class="page-fill forget" id="login">
        <form class="layui-form verify-user-form">
            <div class="layui-form-item tit">忘记密码</div>
            <div class="layui-form-item input-item">
                <label for="username">用户账号</label>
                <input type="text" class="layui-input" id="username" name="username" placeholder="请输入账号" autocomplete="off" lay-verify="required">
            </div>
            <div class="layui-form-item input-item">
                <label for="email">输入邮箱地址</label>
                <input type="text" class="layui-input" id="email" name="email" placeholder="请输入邮箱地址" autocomplete="off" lay-verify="required|email" >
            </div>
            <div class="layui-form-item input-item code-box">
                <label for="captcha">验证码</label>
                <input type="text" class="layui-input" id="captcha" name="captcha" placeholder="请输入验证码" autocomplete="off" lay-verify="required" maxlength="4">
                <button type="button" class="layui-btn btn-auth-code">获取验证码</button>
                <div type="hidden" id="hid"></div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-block" lay-filter="verifyUser" lay-submit="">提 交</button>
            </div>
            <div class="login-link">
                <a th:href="@{/toLogin}">再去登录试试</a>
            </div>
        </form>
        <form class="layui-form reset-password-form">
            <div class="layui-form-item tit">设置密码</div>
            <div class="layui-form-item input-item">
                <label for="password">新密码</label>
                <input type="password" class="layui-input" id="password" name="password" placeholder="请输入密码" autocomplete="off" lay-verify="required|password">
            </div>
            <div class="layui-form-item input-item">
                <label for="comPassword">确认密码</label>
                <input type="password" class="layui-input" id="comPassword" name="password" placeholder="请确认密码" autocomplete="off" lay-verify="required|comPassword">
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-block" lay-filter="resetPassword" lay-submit="">确定设置</button>
            </div>
        </form>
    </div>
    <!--js逻辑-->
    <script th:src="@{/lib/layui/layui.js}"></script>
    <script>
        layui.use(["form", "okLayer", "okUtils"], function () {
            let $ = layui.jquery;
            let form = layui.form;
            let emailRegex = /^([a-zA-Z\d][\w-]{2,})@(\w{2,})\.([a-z]{2,})(\.[a-z]{2,})?$/;
            let timer = "";
            let intervalTime = 60;

            okLoading.close($);

            /**
             * 数据校验
             */
            form.verify({
                email: [emailRegex, "邮件格式不正确"],
                password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
                comPassword: function (val) {
                    let password = $("#password").val();
                    return password === val ? "" : "两次密码不一致";
                }
            });

            /**
             * 提交表单
             */
            form.on("submit(verifyUser)", function (data) {
                //先校验验证码是否正确，然后成功之后样式修改，显示重置密码表单
                let field = data.field;
                let username = field.username;
                let captcha = field.captcha;
                let email = field.email;
                let captcha2=$("#hid").val();
                if(captcha!==captcha2){
                   layer.msg("验证码错误，请重新填写", {icon: 7,timeout:1000},function (){
                       $("#captcha").val("");
                   });
                   return false;
               }
                $.ajax({
                    url: '[[@{/toForgetPassword}]]',
                    type: 'post',
                    data:{
                        username:username,
                        email:email
                    },
                    success:function (a){
                        if(a){
                            // 样式修改
                            $('.btn-auth-code').removeClass("layui-btn-disabled");
                            $('.btn-auth-code').text("重新获取");
                            // 重置定时器
                            clearInterval(timer);
                            timer = "";
                            intervalTime = 60;
                            // 显示重置密码表单
                            $(".verify-user-form, .reset-password-form").toggle();
                        }
                       else {
                            layer.msg("查无此人,请检查用户账号和邮箱是否输入正确", {icon: 7, time: 2000});
                        }
                    },
                    error: function (){
                        layer.open({
                            title: '程序错误',
                            content: '程序故障！留言提交出现异常（请在网站下方联系管理员）',
                            icon: 5
                        });
                    }
                })
                return false;
            });

            /**
             * 获取验证码
             * 点击之后验证邮箱是否填对
             * 然后往邮箱发激活码
             */
            $('.btn-auth-code').click(function () {
                let _this = $(this);
                if (_this.hasClass("layui-btn-disabled")) {
                    return;
                }
                let email = $("#email").val();
                if (emailRegex.test(email)) {
                    _this.addClass("layui-btn-disabled");
                    _this.text(intervalTime + "秒后获取");
                    // 按钮操作定时器
                    timer = setInterval(function () {
                        intervalTime--;
                        if (intervalTime < 1) {
                            clearInterval(timer);
                            _this.removeClass("layui-btn-disabled");
                            _this.text("重新获取");
                            intervalTime = 60;
                        } else {
                            _this.text(intervalTime + "秒后获取");
                        }
                    }, 1000);
                    // 发送邮箱验证码
                    $.ajax({
                        url: '[[@{/toSendCaptcha}]]',
                        type: 'post',
                        data:{
                            email:email
                        },
                        success: function(data){
                            $("#hid").val(data);
                        },
                        error:function (){
                            layer.open({
                                title: '程序错误',
                                content: '程序故障！留言提交出现异常（请在网站下方联系管理员）',
                                icon: 5
                            });
                        }
                    })
                } else {
                    layer.msg("邮箱格式不正确", {icon: "5", anim: "6"});
                    $("#email").focus();
                }
            });

            /**
             * 重置密码
             */
            form.on("submit(resetPassword)", function (data) {
                let field = data.field;
                let password = field.password;
                let $1 = $("#username").val();
                console.log($1);
                $.ajax({
                    url: '[[@{/resetPassword}]]',
                    type: 'post',
                    data:{
                        password:password,
                        username:$1
                    },
                    success:function (a){
                        if(a){
                            layer.msg("修改成功", {icon:1,time:1500, shade:0.4}, function (){
                                location.href = "[[@{/toLogin}]]";
                            });
                        }else {
                            layer.open({
                                title: '修改失败',
                                content: '修改失败！我也不知道你修改的密码是不是违规，也可能是我的问题，请在网站下方联系我',
                                icon: 5
                            });
                        }

                    },
                    error:function (){
                        layer.open({
                            title: '程序错误',
                            content: '程序故障！请在网站下方联系管理员并说明情况',
                            icon: 5
                        });
                    }
                })
                return false;
            });

            /**
             * 表单input组件单击时
             */
            $("#login .input-item .layui-input").click(function (e) {
                e.stopPropagation();
                $(this).addClass("layui-input-focus").find(".layui-input").focus();
            });

            /**
             * 表单input组件获取焦点时
             */
            $("#login .layui-form-item .layui-input").focus(function () {
                $(this).parent().addClass("layui-input-focus");
            });

            /**
             * 表单input组件失去焦点时
             */
            $("#login .layui-form-item .layui-input").blur(function () {
                $(this).parent().removeClass("layui-input-focus");
                if ($(this).val() != "") {
                    $(this).parent().addClass("layui-input-active");
                } else {
                    $(this).parent().removeClass("layui-input-active");
                }
            });
        });
    </script>
</body>
</html>
